<template>
  <div>
    <div ref="myChart" :style="{ height: `${height}px`, width: `100%` }" class="pie"></div>
    <img class="img" src="@/assets/lujing.png" alt="" />
    <img class="icon" src="@/assets/hong.png" alt="" v-if="imaIndex == '1'" />
    <img class="icon" src="@/assets/cheng.png" alt="" v-if="imaIndex == '2'" />
    <img class="icon" src="@/assets/huang.png" alt="" v-if="imaIndex == '3'" />
    <img class="icon" src="@/assets/lan.png" alt="" v-if="imaIndex == '4'" />
    <div
      class="title"
      :style="{
        color: `${
          imaIndex == 1
            ? '#FF2F54'
            : imaIndex == 2
            ? '#FF7A1E'
            : imaIndex == 3
            ? '#FFEB0E'
            : '#1EEFFF'
        }`,
      }"
    >
      {{ setimaIndex(imaIndex) }}
    </div>
    <img
      src="@/assets/direction2.png"
      alt=""
      :class="
        imaIndex == '4'
          ? 'positionBlue'
          : imaIndex == '3'
          ? 'positionYellow'
          : imaIndex == '2'
          ? 'positionOrange'
          : 'positionRed'
      "
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
import { ref } from 'vue';
import echarts, { ECharts } from 'echarts';
import { removeListener } from 'resize-detector';
import dark from '@/components/chart/dark';
import { debounce } from 'lodash-es';
echarts.registerTheme('dark-pro', dark);
export default defineComponent({
  props: {
    height: {
      type: Number,
      default: 200,
    },
    option: {
      type: String,
      default: () => {
        return '';
      },
    },
  },
  setup(props) {
    const setimaIndex = (imaIndex: string): string => {
      let s = '';
      switch (imaIndex) {
        case '1':
          s = '红色预警';
          break;
        case '2':
          s = '橙色预警';
          break;
        case '3':
          s = '黄色预警';
          break;
        case '4':
          s = '蓝色预警';
          break;
      }
      return s;
    };
    const imaIndex = ref<string>('1');
    const echartsOption = ref<any>({
      series: [
        {
          type: 'pie',
          label: {
            show: false,
          },
          center: ['55%', '60%'], //控制上下左右的位置
          radius: ['75%', '85%'],
          startAngle: 180,
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#2B2D33',
            },
          },
          data: [
            {
              name: '申请数',
              value: 45,
              itemStyle: {
                color: '#1CDAFF',
              },
            },
            {
              name: '盖印数', // 实际显示部分是总量-用量
              value: 45,
              itemStyle: {
                color: '#ECD60D',
              },
            },
            {
              name: '盖印数', // 实际显示部分是总量-用量
              value: 45,
              itemStyle: {
                color: '#FF6F1C',
              },
            },
            {
              name: '盖印数', // 实际显示部分是总量-用量
              value: 45,
              itemStyle: {
                color: '#FF2B4D',
              },
            },
            {
              name: 'bottom',
              value: 180,
              itemStyle: {
                color: '#2B2D33',
              },
            },
          ],
        },
      ],
    });

    const myChart = ref<any>();
    let chart: ECharts | null = null;
    const resizeChart = () => {
      chart?.resize();
    };
    const resize = debounce(resizeChart, 300);
    const myCharts = ref<any>();
    const init = () => {
      chart = echarts.init(myChart.value!);
      chart.setOption(echartsOption.value, true);
    };
    onMounted(() => {
      init();
    });
    watch(
      () => props.option,
      () => {
        imaIndex.value = props.option;
        init();
      },
      {
        deep: true, // 深度监听的参数
      },
    );
    onUnmounted(() => {
      if (myChart.value) {
        removeListener(myChart.value, resize);
      }
      chart?.dispose();
      chart = null;
    });
    return {
      echartsOption,
      myChart,
      init,
      myCharts,
      resizeChart,
      imaIndex,
      setimaIndex,
    };
  },
});
</script>
<style lang="less" scoped>
.pie {
  background-image: url(~@/assets/pie.png);
  background-repeat: no-repeat;
  background-position-x: 54px;
  background-position-y: 27px;
  background-size: 303px 52%;
}
.img {
  position: absolute;
  top: 85px;
  left: 109px;
  width: 190px;
  height: 92px;
}
.icon {
  position: absolute;
  top: 108px;
  left: 321px;
}
.title {
  position: absolute;
  top: 150px;
  left: 315px;
}
.positionBlue {
  position: absolute;
  top: 136px;
  left: 240px;
  transform: rotate(21deg);
}
.positionYellow {
  position: absolute;
  top: 83px;
  left: 294px;
  transform: rotate(62deg);
}
.positionOrange {
  position: absolute;
  top: 81px;
  left: 362px;
  transform: rotate(354deg);
}
.positionRed {
  position: absolute;
  top: 136px;
  left: 423px;
  transform: rotate(33deg);
}
</style>
